<template>
  <div class="border1">
    <div class="border2">
      <div class="header">
        <div class="title">
          <el-form :inline="true" :model="student" class="demo-form-inline">
            <el-form-item label="名称" style="margin-right: 30px">
              <el-input
                v-model="student.studentName"
                placeholder="名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="工号" style="margin-right: 30px">
              <el-input
                v-model="student.cardNumber"
                placeholder="工号"
              ></el-input>
            </el-form-item>
            <el-form-item label="标签" style="margin-right: 30px">
              <el-input v-model="student.title" placeholder="标签"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="content">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            fixed
            prop="studentName"
            label="姓名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="cardNumber"
            label="工号"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="title" label="标签" width="350" align="center">
          </el-table-column>

          <el-table-column
            prop="imgUrl"
            label="照片"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="'http://localhost:8885/ph/download/' + scope.row.id"
                fit="cover"
                :preview-src-list="[
                  'http://localhost:8885/ph/download/' + scope.row.id,
                ]"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column
            prop="newDate"
            label="最近"
            width="180"
            align="center"
          >
            <!-- <template> 标签本身不会渲染到 DOM 中，它只是一个占位符 -->
            <!-- slot-scope="scope"  slot-scope 是 Vue 2.x 中的语法，用于在作用域插槽中访问父组件传递的数据 -->
            <!-- scope 是一个对象，包含了父组件传递给插槽的数据。在这个例子中，scope 包含了当前行的数据（scope.row） -->
            <!-- scope.row 表示当前行的数据对象。newD是当前行数据中的一个字段，表示日期时间。 -->

            <template slot-scope="scope">
              {{ formatDate(scope.row.newDate) }}
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="button">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="student.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.initializePhStudent(this.student);
  },

  data() {
    return {
      proxyTarget: process.env.VUE_APP_API_BASE_URL,
      tableData: [],
      student: {
        currentPage: "1",
        pageSize: "10",
      },
      total: 0,
      currentPage: 1,
    };
  },
  methods: {

    onReset() {
      this.student = {
        currentPage: "1",
        pageSize: "10",
      };
      this.initializePhStudent(this.student);
    },
    onSubmit() {
      this.initializePhStudent(this.student);
    },
    handleSizeChange(data) {
      this.student.pageSize = data;
      this.initializePhStudent(this.student);
      window.scrollTo(0, 0);
    },

    handleCurrentChange(data) {
      this.student.currentPage = data;
      this.initializePhStudent(this.student);
      window.scrollTo(0, 0);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    async initializePhStudent(data) {
      let res = await this.$api.phStudentList(data);
      console.log(JSON.stringify(res));
      this.tableData = res.data.data;
      this.total = res.data.total;
      console.log("值为=================" + JSON.stringify(res.data));
    },
  },
};
</script>

<style scoped>
/* 给父元素 .border1 设置明确的高度 */
/* 如果 .border1 的高度设置为 auto，.border2 的背景色会自动覆盖整个内容区域。 */
.border1 {
  height: auto; /* 父元素占满整个视口高度 */
}

/* 子元素 .border2 设置为充满父元素 */
.border2 {
  background-color: #f0f0ff;
  height: 100%; /* 使 .border2 高度占满父元素 */
  width: 100%; /* 使宽度充满父元素 */
}
.content {
  /* padding: auto; */
  padding: 30px 35px 30px 35px;
}
.header {
  height: 100px;
  margin: 0 35px;
  /* background-color: red; */
}
.title {
  padding: 35px 35px;
}
.button {
  padding: 20px 20px;
}
</style>

